import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { RangeDateC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../comps';
import moment from 'moment';

class RangeDateCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      start1: undefined,
      end1: undefined,
      hasDataBD1: undefined,
      hasDataED: undefined,
    };

    setTimeout(() => {
      this.setState({
        start1: moment('2020-01-01'),
        end1: moment('2020-03-01'),
        hasDataBD1: moment('2019-01-01'),
        hasDataED1: moment('2020-09-30'),
      });
    }, 2000);
  }

  changeDate = () => {
    // 更改日期显示
    this.state.RangeDateC.setDate([moment('2015-05-01'), moment('2016-11-12')]);
    // 更改可选范围
    this.setState({
      hasDataBD1: moment('2015-01-01'),
      hasDataED1: moment('2016-12-31'),
    });
  };

  reset = () => {
    this.props.form.resetFields(); // 重置条件
    this.state.RangeDateC.reset();
  };
  setref = (ref) => {
    this.setState({ RangeDateC: ref }, () => {
      console.log('wo', this.state.RangeDateC);
    });
  };
  change = () => {
    this.state.RangeDateC.setDate([moment('2020-01-01'), moment('2020-05-01')]);
  };
  render() {
    return (
      <div style={{ padding: '20px', width: '800px' }}>
        <FirstHeaderC title='时间区间组件' />
        <SecondHeaderC title='基本场景' />
        <RangeDateC
          form={this.props.form} // form对象
          title='日期区间' // 显示名称
          dataIndex={['start1', 'end1']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={[moment('2020-06-01'), moment('2020-10-01')]}
          onRef={(ref) => this.setref(ref)}
        />
        <PrimaryC title='重置' onClick={this.reset} />
        <PrimaryC title='修改' onClick={this.change} />
        <br />
        <SecondHeaderC title='有初始化值(2018-12-31 至 2020-07-30)' />
        <RangeDateC
          form={this.props.form} // form对象
          title='日期区间' // 显示名称
          dataIndex={['start2', 'end2']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={[moment('2018-12-31'), moment('2020-07-30')]}
        />
        <br />
        <SecondHeaderC title='有范围可选范围限制(2018-12-31 至 2020-07-30)' />
        <RangeDateC
          form={this.props.form} // form对象
          title='日期区间' // 显示名称
          dataIndex={['start3', 'end3']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          hasDataBD={moment('2018-12-31')} // 有数据的的起始时间,若不传，则该字段不影响起止时间的计算，若获取的有数据的时段为空，则需传null
          hasDataED={moment('2020-07-30')}
        />
        <br />
        <SecondHeaderC title='仅能设置从今天往后的日期' />
        <RangeDateC
          form={this.props.form} // form对象
          title='日期区间' // 显示名称
          dataIndex={['start3', 'end3']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          hasDataBD={moment().add(1, 'day')}
          disableFuture={false}
        />
        <br />
        <SecondHeaderC title='异步加载初始化值和可选范围，更改时间范围，更改可选范围' />
        <div>
          {`
                start1: moment('2020-01-01'),
                end1: moment('2020-03-01'),
                hasDataBD1: moment('2019-01-01'),
                hasDataED1: moment('2020-09-30')
                `}
        </div>
        <RangeDateC
          form={this.props.form} // form对象
          title='日期区间' // 显示名称
          dataIndex={['start4', 'end4']} // Form识别的下拉选项Item ID
          onChange={(e) => console.log(e)} // 时间变化事件
          initialValue={[this.state.start1, this.state.end1]}
          hasDataBD={this.state.hasDataBD1} // 有数据的的起始时间,若不传，则该字段不影响起止时间的计算，若获取的有数据的时段为空，则需传null
          hasDataED={this.state.hasDataED1}
          onRef={(ref) => this.setState({ RangeDateC: ref })}
        />
        <PrimaryC title='点击更改' style={{ margin: '10px' }} onClick={this.changeDate} />
        <div>
          {`// 更改日期显示
                this.state.RangeDateC.setDate([momont('2015-05-01'), momont('2016-11-12')]);
                // 更改可选范围moment('2015-01-01')  moment('2016-12-31')`}
        </div>
        <br />
      </div>
    );
  }
}

export default Form.create()(RangeDateCDemo);
